<template>
	<view class="detail">
		<view class="fixbg" :style="{'background-image':'url('+songDetail.al.picUrl + ')'}"></view>
		<musichead :title='songDetail.name' :icon='true' color='white'></musichead>
		<view class="container" v-show="!isLoading">
			<scroll-view scroll-y="true">
				<!-- 播放器组件 -->
				<view class="detail-play" @tap="handleToPlay">
					<image :src="songDetail.al.picUrl" mode="" :class="{'run':isPlayRotate}"></image>
					<text class="iconfont" :class="iconPlay"></text>
					<view></view>
				</view>

				<!-- 歌词 -->
				<view class="detail-lyric">
					<view class="lyric-wrap" :style="{transform:'translateY('+ -(lyricIndex-1)*82+'rpx)'}">
						<view class="lyric-item " :class="{active:lyricIndex==index}" v-for="(item,index) in songLyric" :key='index'>{{item.lyric}}</view>
					</view>
				</view>

				<!-- 推荐歌曲组件 -->
				<view class="detail-like">
					<view class="like-head">
						喜欢这首歌的人也听
					</view>
					<view class="like-item" v-for="(item,index) in songSimi" :key='item.id' @tap="handleToSimi(item.id)">
						<!-- 歌曲图片 -->
						<view class="item-img">
							<image :src="item.album.picUrl" mode=""></image>
						</view>
						<!-- 歌曲 -->
						<view class="item-song">
							<view class="item-title">{{item.name}}</view>
							<view class="song-img">
								
								<image v-if="item.privilege.flag>60 && item.privilege.flag<70" src="@/static/dujia.png" mode=""></image>
							
								<image v-if="item.privilege.maxbr==999000"  src="@/static/sq.png" mode=""></image>
								{{item.album.artists[0].name}} - {{item.name}}
							</view>
						</view>
						<!-- 播放按钮 -->
						<text class="iconfont icon-bofang1"></text>
					</view>
				</view>
				<!-- 评论组件 -->
				<view class="detail-comment">
					<!-- 头部 -->
					<view class="comment-head">
						精彩评论
					</view>
					<view class="comment-item" v-for="(item,index) in songComment" :key="item.commentId">
						<!-- 头像 -->
						<view class="comment-img">
							<image :src="item.user.avatarUrl" mode=""></image>
						</view>
						<!-- 右边内容组件 -->
						<view class="comment-content">
							<view class="content-title">
								<!-- id -->
								<view class="title-name">
									<view class="name1">{{item.user.nickname}}</view>
									<view class="name2">{{item.time | formatTime}}</view>
								</view>
								<!-- 点赞 -->
								<view class="comment-like">{{item.likedCount | formatCount}}
									<text class="iconfont icon-dianzan"></text>
								</view>
							</view>
							<view class="comment-text">{{item.content}}</view>
						</view>
					</view>


				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import musichead from '@/components/musichead/musichead.vue'
	
	import {songDetail,songSimi,songComment,songLyric,songUrl} from '@/common/api.js'
	export default {
		data() {
			return {
				isLoading: true,
				songDetail:{
					al:{
						picUrl:''
					}
				},
				songSimi:[],
				songComment:[],
				songLyric:{},
				lyricIndex:0,
				iconPlay:'icon-zanting',
				//是否旋转
				isPlayRotate:true,
				timer:''
			};
		},
		components: {
			musichead
		},
		onLoad(options) {
			//console.log(options.songId);
			this.getMusic(options.songId)
		},
		onUnload() {
			this.cancelLyricIndex()
			// #ifdef H5
			this.bgAudioManager.destroy()
			// #endif
		},
		onHide() {
			this.cancelLyricIndex()
			// #ifdef H5
			this.bgAudioManager.destroy()
			// #endif
		},
		methods:{
			getMusic(songId) {
				//获取下一首歌的id
				this.$store.commit('NEXT_ID',songId)
				
				uni.showLoading({
					title:'加载中'
				})
				this.isLoading=true
				
				Promise.all([songDetail(songId),songSimi(songId),songComment(songId),songLyric(songId),songUrl(songId)]).then(res => {
					console.log(res);
					if(res[0][1].data.code=='200') {
						this.songDetail = res[0][1].data.songs[0]
					}
					
					if(res[1][1].data.code=='200') {
						this.songSimi = res[1][1].data.songs
					}
					
						
					if(res[2][1].data.code=='200') {
						this.songComment = res[2][1].data.hotComments
					}
					
					if(res[3][1].data.code=='200') {
						let lyric = res[3][1].data.lrc.lyric
						let re = /\[([^\]]+)\]([^\[]+)/g
						var result = []
						lyric.replace(re,($0,$1,$2) =>{
							result.push({"time":this.formatTimeToSec($1),"lyric":$2})
						})
						this.songLyric = result
						//console.log(result);
					}
					if(res[4][1].data.code=='200') {
						
						// #ifdef MP-WEIXIN
						this.bgAudioManager = uni.getBackgroundAudioManager();
						this.bgAudioManager.title = this.songDetail.name;
						// #endif
						
						// #ifdef H5
						if(!this.bgAudioManager) {
							 this.bgAudioManager= uni.createInnerAudioContext()
						}
						
						 this.iconPlay='icon-bofang'
						 this.isPlayRotate=false
						// #endif
						
						
						this.bgAudioManager.src =res[4][1].data.data[0].url || '';
						this.listenLyricIndex()
						//监听播放的状态
						this.bgAudioManager.onPlay(()=>{
							this.iconPlay='icon-zanting'
							this.isPlayRotate=true
							
							this.listenLyricIndex()
						})
						//监听暂停的状态
						this.bgAudioManager.onPause(()=>{
							this.iconPlay='icon-bofang'
							this.isPlayRotate=false
							this.cancelLyricIndex()
							
						})
						//监听播放结束自动播放下一首歌
						this.bgAudioManager.onEnded(() =>{
							this.getMusic(this.$store.state.nextId)
						})
					}
					this.isLoading=false
					uni.hideLoading()
				})
			},
			formatTimeToSec(value) {
				let arr = value.split(':')
				return (Number(arr[0]*60) + Number(arr[1])).toFixed(1)
			},
			//点击中间的图标可以暂停和播放
			handleToPlay() {
				if(this.bgAudioManager.paused) {
					this.bgAudioManager.play()
				}else {
					this.bgAudioManager.pause()
				}
			},
			//定时器控制歌词滚动
			listenLyricIndex() {
				clearInterval(this.timer)
				this.timer = setInterval(() => {
					for(var i=0;i<this.songLyric.length;i++) {
						if(this.bgAudioManager.currentTime> this.songLyric[this.songLyric.length-1].time) {
							this.lyricIndex = this.songLyric.length-1
							break
						}
						if(this.bgAudioManager.currentTime>this.songLyric[i].time && this.bgAudioManager.currentTime<this.songLyric[i+1].time) {
							this.lyricIndex=i
						}
					
					}
				},500)
			},
			cancelLyricIndex() {
				clearInterval(this.timer)
			},
			handleToSimi(id) {
				this.getMusic(id)
			}
		}
	}
</script>

<style lang="less" scoped>
	.detail {
		.detail-play {
			width: 580rpx;
			height: 580rpx;
			background: url(~@/static/disc.png);
			background-size: cover;
			margin: 214rpx auto 0 auto;
			position: relative;

			image {
				width: 370rpx;
				height: 370rpx;
				border-radius: 50%;
				overflow: hidden;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				// 居中
				margin: auto;
				//图片旋转的开启  linear匀速 infinite无限次数
				animation: 10s linear move infinite;
				//一开始不旋转
				animation-play-state: paused;
			}
			.run {
				animation-play-state: running;
			}
			@keyframes move {
				from{transform: rotate(0deg);}
				to{transform: rotate(360deg);}
			}

			text {
				width: 100rpx;
				height: 100rpx;
				font-size: 100rpx;
				color: white;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				// 居中
				margin: auto;
			}

			view {
				width: 230rpx;
				height: 360rpx;
				background: url(~@/static/needle.png);
				position: absolute;
				left: 100rpx;
				right: 0;
				top: -200rpx;
				margin: auto;
				background-size: cover;
			}

		}

		.detail-lyric {
			font-size: 32rpx;
			line-height: 82rpx;
			height: 246rpx;
			text-align: center;
			overflow: hidden;
			color: #6f6e73;

			.lyric-wrap {
				transition: .5s;
				.lyric-item {
					line-height: 82rpx;
				}

				.active {
					color: white;
				}
			}
		}

		.detail-like {
			margin: 0 30rpx;


			.like-head {
				font-size: 36rpx;
				color: white;
				margin: 50rpx 0;
			}

			.like-item {
				display: flex;
				align-items: center;
				margin-bottom: 28rpx;

				.item-img {
					width: 82rpx;
					height: 82rpx;
					border-radius: 20rpx;
					overflow: hidden;
					margin-right: 20rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.item-song {
					flex: 1;
					color: #c6c2bf;

					.item-title {
						font-size: 28rpx;
						color: white;
						margin-bottom: 12rpx;
					}

					image {
						width: 26rpx;
						height: 20rpx;
						margin-right: 10rpx;
					}


				}

				.song-img {
					font-size: 22rpx;
				}

				text {
					width: 50rpx;
					height: 50rpx;
					color: #c6c2bf;
				}
			}
		}
		
		.detail-comment {
			margin: 0 30rpx;
			
			.comment-head {
				font-size: 36rpx;
				color: white;
				margin: 50rpx 0;
			}
			
			.comment-item {
				margin-bottom: 28rpx;
				display: flex;
				.comment-img {
					image {
						width: 64rpx;
						height: 64rpx;
						border-radius: 50%;
						overflow: hidden;
						margin-right: 18rpx;
					}
				}
				
				.comment-content {
					flex: 1;
					color: white;
					.content-title {
						display: flex;
						
						.title-name {
							flex:1;
							
							.name1 {
								font-size:26rpx;
								
							}
							.name2 {
								font-size: 20rpx;
							}
						}
						
						.comment-like {
							font-size: 28rpx;
						
							text {
								margin-left: 10rpx;
							}
						}	
						
					}
					
					.comment-text {
						font-size: 28rpx;
						line-height: 40rpx;
						color: white;
						margin-top: 20rpx;
						border-bottom: 1px #e4e4e4 solid;
						padding-bottom: 40rpx;
					}
				}
			}
		}
	}
</style>
